<template>
	<view class="container">
		<view class="header">
			<image class="img" src="../../static/images/yxLogo1.png" mode=""></image>
			<view class="title">欢迎登录鑫泰erp</view>
			<view class="title">(试用版)</view>
		</view>

		<view style="padding-top: 20px;">
			<view class="input-row border" >
				<text class="title">账号：</text>
				<view class="m-input-view">
					<input name="username" placeholder="请输入账号" v-model.trim="form.username" style="width: 90%;" />
				</view>
			</view>
			<view class="input-row border">
				<text class="title">密码：</text>
				<view class="m-input-view">
					<input type="text" placeholder="请输入登录密码" name="password" 
					v-model.trim="form.password" :password="!showPassword" style="width: 85%;" />
					<image class="pwdimg" :src="showPassword?'/static/shilu/op.png':'/static/shilu/cl.png'"
					@tap="display"></image>
				</view>
			</view>
			<view class="input-row border">
				<checkbox-group change="checkboxChange">
					<checkbox id="chkRem" type="checkbox" style="padding-left: 20px;" :checked='rememberPsw' @tap="rememberPsw =! rememberPsw" color="#09CC86"/>
					记住账号密码
				</checkbox-group>
			</view>
		</view>

		<button :loading="loading" :disabled="loading" @click="submit" class="submit-btn" hover-class="none">登录</button>
		
		<view class="tui-login-way" >
			<view hover-class="tui-opcity">
				其他方式登录
			</view>
		</view>
		<tui-bottom-popup :mask="false" backgroundColor="transparent" :show="true">
			<view class="tui-auth-login">
				<view class="tui-icon-platform" hover-class="tui-opcity" :hover-stay-time="150" @tap="weixinLogin">
					<image src="../../static/images/icon_wechat.png" class="tui-login-logo"></image>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script lang="ts">
	import { useAuthStore } from '@/store/modules/auth';
	import { Toast } from '@/utils/uniHooks/toast';
    import request, { baseUrl } from "@/utils/httpInterceptor";
	import tuiBottomPopup from "@/components/tui-bottom-popup";

	export default {
		components:{
			tuiBottomPopup
		},
		data() {
			return {
				// 当前显示 _id
				loading: false,
				//复选框状态 默认勾选
				rememberPsw: true,
				// 显示密码
				showPassword:false,
				form: {
					username: '',
					password: ''
				},
			};
		},
		mounted() {
			try{
				//记住密码 缓存的账号
				var HBusername = uni.getStorageSync('HBusername');
				// 缓存的密码
				var HBpassword = uni.getStorageSync('HBpassword');
					//有缓存就赋值给文本没有就清空
				if (HBusername && HBpassword) {
					this.form.username = HBusername;
					this.form.password = HBpassword;
				} else {
					this.form.username = '';
					this.form.password = '';
				}
			}catch(e){}
		},
		computed: {
			authStore: () => useAuthStore()
		},
		onlauch(){
			//解除跳转时闪过的登录页
			let userinfo = uni.getStorageSync('HBusername');
			if(!userinfo){
				uni.reLaunch({
						url:"'/pages/main/index'",
						success:()=>{
							//跳转完页面后再关闭启动页
							plus.navigator.closeSplashscreen();
						}
					})
			}
			else{
				//关闭启动页，进入首页
				 plus.navigator.closeSplashscreen(); 
			}
		},
		onShow: function() {
			this.authStore.setOrcancelPollingInterval();
		},

		methods: {
			display() {
			    this.showPassword = !this.showPassword
			},
			
			// 复选框是否记住秘密状态变更时
			checkboxChange: function(e) {
				try{
					console.log("复选框状态:"+e.detail.value.length);
					if (e.detail.value.length == 1) {
						// 获取缓存的账号 赋值
						var HBusername = uni.getStorageSync('HBusername');
						// 缓存的密码
						var HBpassword = uni.getStorageSync('HBpassword');
						this.form.username = HBusername;
						this.form.password = HBpassword;
					} else {
						//销毁
						uni.removeStorageSync('HBusername');
						uni.removeStorageSync('HBpassword');              
					}
				}catch(e){ }
			},
			
			weixinLogin() {
				console.log('weixinLogin');
				uni.login({
					provider: 'weixin',
					// onlyAuthorize 有两种模式
					// onlyAuthorize: false,
					success: res => {			
						// onlyAuthorize为 false时
						console.log(res.authResult.openid);
						this.loading = true
						this.authStore
							.wxlogin({
								openid: res.authResult.openid,
							})
							.then(
								res => {
									Toast('登录成功');
									uni.reLaunch({
										url: '/pages/main/index'
									});
								},
								err => {
									Toast(err?.msg||'登录失败');
								}
							).finally(() => {
								this.loading = false
							})
					},
					fail: function (err) {
						Toast(err);
						console.log('登录授权失败');
						console.log(err);
					}
				});
			},

			submit(e) {
				if (!this.form.username) {
					return Toast('请填写用户名');
				}
				if (!this.form.password) {
					return Toast('请填写密码');
				}
				this.loading = true
				this.authStore
					.login({
						username: this.form.username,
						password: this.form.password,
					})
					.then(
						res => {
							try {
								//勾选就缓存账号和密码
								if (this.rememberPsw) {
									uni.setStorageSync('HBusername', this.form.username);
									uni.setStorageSync('HBpassword', this.form.password);
								} else {
									//销毁缓存
									uni.removeStorageSync('HBusername'); 
									uni.removeStorageSync('HBpassword');
								}
							} catch (e) {}
							Toast('登录成功');
							uni.reLaunch({
								url: '/pages/main/index'
							});
						},
						err => {
							Toast(err?.msg||'登录失败');
						}
					).finally(() => {
						this.loading = false
					})
			}
		}
	};
</script>

<style lang="scss" scoped>
	
	.container {

		padding-top: 20px;
		font-size: 12pt;
		.header {
			text-align: center;
			.img {
				width: 93px;
				height: 85px;
				margin: 0 auto;
			}
		}
	}
	
	.submit-btn {
		margin-top: 10px;
		width: 92%;
		background-color: #0faeff;
		color: white;
	}
	
	.input-row {
		display: flex;
		flex-direction: row;
		position: relative;
		height: 40px;
		line-height: 40px;
	}
	
	.input-row .title {
		width: 50px;
		padding-left: 15px;
	}
	
	.input-row.border::after {
		position: absolute;
		bottom: 0;
		left: 10px;
		right: 10px;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	
	.m-input-view {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
		padding: 0 0px;
	}
	
	.tui-login-way {
		width: 100%;
		font-size: 26rpx;
		// color: $uni-text-color;
		display: flex;
		justify-content: center;
		position: fixed;
		left: 0;
		bottom: 220rpx;
	
		view {
			padding: 12rpx 0;
		}
	}
	.tui-auth-login {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 80rpx;
		padding-top: 20rpx;
	
		.tui-icon-platform {
			width: 90rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			// margin-left: 40rpx;
	
			&::after {
				content: '';
				position: absolute;
				width: 200%;
				height: 200%;
				transform-origin: 0 0;
				transform: scale(0.5, 0.5) translateZ(0);
				box-sizing: border-box;
				left: 0;
				top: 0;
				border-radius: 180rpx;
				border: 1rpx solid $uni-text-color-placeholder;
			}
		}
		.tui-login-logo {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.pwdimg{
    	width: 40upx;
    	height: 40upx;
    }
</style>
